<template>
  <div class="notify">
    <fx-card title="基础用法">
      <fx-button @click="baseClick(2000)" class="mr20">可关闭通知</fx-button>
      <fx-button @click="baseClick(0)">手动关闭通知</fx-button>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="通知类型">
      <fx-button @click="typeClick('primary')" class="mr20" type="primary">基本</fx-button>
      <fx-button @click="typeClick('success')" class="mr20" type="success">成功</fx-button>
      <fx-button @click="typeClick('warning')" class="mr20" type="warning">警告</fx-button>
      <fx-button @click="typeClick('error')" class="mr20" type="error">失败</fx-button>
      <template #hide>
        <pre v-highlight="type"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="设置消失时间 设置为零时将不会关闭">
      <fx-input-number v-model="durationInput" width="120" :min="0" :max="50000" :step="500"></fx-input-number>
      <fx-button class="ml20" @click="durationClick">设置消失时间</fx-button>
      <template #hide>
        <pre v-highlight="duration"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="自定义弹出位置">
      <fx-button @click="positionClick('top-right')" class="mr20">右上角</fx-button>
      <fx-button @click="positionClick('bottom-right')" class="mr20">右下角</fx-button>
      <fx-button @click="positionClick('bottom-left')" class="mr20">左下角</fx-button>
      <fx-button @click="positionClick('top-left')" class="mr20">左上角</fx-button>
      <template #hide>
        <pre v-highlight="position"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="带有偏移">
      <fx-input-number v-model="offsetInput" :min="20" width="120" class="mr20"></fx-input-number>
      <fx-button @click="offsetClick">带偏移量</fx-button>
      <template #hide>
        <pre v-highlight="offset"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { FxNotify } from '@/base'

export default defineComponent({
  name: 'notify',
  setup () {
    const content = '这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容'
    const baseClick = (duration: number): void => {
      FxNotify({ message: content, showClose: duration === 0, duration })
    }

    const typeClick = (type: 'primary' | 'success' | 'warning' | 'error'): void => {
      FxNotify({ message: content, type })
    }

    const durationInput = ref<number>(0)
    const durationClick = () => {
      FxNotify({ message: content, showClose: durationInput.value === 0, duration: durationInput.value })
    }

    const positionClick = (position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): void => {
      FxNotify({ message: content, position })
    }

    const offsetInput = ref<number>(20)
    const offsetClick = (): void => {
      FxNotify({ message: content, offset: offsetInput.value })
    }

    const base = `<fx-button @click="baseClick(2000)" class="mr20">可关闭通知</fx-button>
<fx-button @click="baseClick(0)">手动关闭通知</fx-button>

export default defineComponent({
  setup() {
    const content = '这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容'
    const baseClick = (duration: number): void => {
      FxNotify({
        message: content,
        showClose: duration === 0,
        duration
      })
    }
  }
})`

    const type = `<fx-button @click="typeClick('primary')" class="mr20" type="primary">基本</fx-button>
<fx-button @click="typeClick('success')" class="mr20" type="success">成功</fx-button>
<fx-button @click="typeClick('warning')" class="mr20" type="warning">警告</fx-button>
<fx-button @click="typeClick('error')" class="mr20" type="error">失败</fx-button>

export default defineComponent({
  setup() {
    const content = '这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容'
    const typeClick = (type: 'primary' | 'success' | 'warning' | 'error'): void => {
      FxNotify({ message: content, type })
    }
  }
})`

    const duration = `<fx-input-number v-model="durationInput" width="120" :min="0" :max="50000" :step="500"></fx-input-number>
<fx-button class="ml20" @click="durationClick">设置消失时间</fx-button>
export default defineComponent({
    setup() {
      const durationInput = ref<number>(0)
      const durationClick = () => {
        FxNotify({ message: content, showClose: durationInput.value === 0, duration: durationInput.value })
      }
    }
})`

    const position = `<fx-button @click="positionClick('top-right')" class="mr20">右上角</fx-button>
<fx-button @click="positionClick('bottom-right')" class="mr20">右下角</fx-button>
<fx-button @click="positionClick('bottom-left')" class="mr20">左下角</fx-button>
<fx-button @click="positionClick('top-left')" class="mr20">左上角</fx-button>

export default defineComponent({
  setup() {
    const content = '这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容'
    const positionClick = (position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'): void => {
      FxNotify({ message: content, position })
    }
  }
})`

    const offset = `<fx-input-number v-model="offsetInput" :min="20" width="120" class="mr20"></fx-input-number>
<fx-button @click="offsetClick">带偏移量</fx-button>

export default defineComponent({
  setup() {
    const content = '这里填写内容这里填写内容这里填写内容这里填写内容这里填写内容'
    const offsetInput = ref<number>(20)
    const offsetClick = ():void => {
      FxNotify({ message: content, offset: offsetInput.value })
    }
  }
})`

    return {
      baseClick,
      typeClick,
      positionClick,
      offsetClick,
      durationClick,
      offsetInput,
      durationInput,
      base,
      type,
      duration,
      position,
      offset
    }
  }
})
</script>

<style scoped lang="scss">
.notify {
}
</style>
